<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
     <script type="text/javascript" src="./mootools-core-1.4.5.js"></script>
    <link href="./bootstrap/css/bootstrap.css" rel="stylesheet">
    <script type="text/javascript">

        var TopScroll=new Class({
            Implements:[Events,Options],
            options:{
                container:'',//容器
                img:[],//图片数组
                auto:false//是否自动切换
            },
            initialize:function(options){
                this.setOptions(options);
                this.container=this.options.container||document.body;
                this.img=this.options.img;
                this.auto=this.options.auto;
                this.createItem();
            },
            createItem:function(){
                Array.forEach(function(v,k){
                    new Element("li").append(this.container);

                }.bind(this));
            }

        });
        window.addEvent('domready',function(){
            var myFx = new Fx.Tween('container', {
                duration: 1000*9*2,

                link: 'cancel',
                property: 'top'
            });
            //myFx.start(0,-170*9);
           // myFx.start(-170*4,0);
            $("container").addEvent("mousewheel",function(e){
//                console.log(JSON.encode(e.page));
                console.log(e.event.timeStamp+"=>"+e);
            })
        });

    </script>
    <style type="text/css">

    .cc{
        height: 170px;
        width: 500px;
        overflow: hidden;
        position: relative;
        border: solid 1px red;
        top:0;
        left: 0;
        margin: 0;
        padding: 0;
    }
    #container{margin: 0;padding: 0;position: relative;left: 0;top:0;}
   .cc li{height: 168px;width: 498px;border: solid 1px blue;list-style: none;text-align: center;}
        .rb{}
        .rb li{display: inline-block;height: 25px;width: 25px;border: solid 1px blue;text-align: center;line-height: 25px;cursor: pointer;}
        .rb li:hover{background: blue;color: #ffffff;}
    </style>
    <title></title>
</head>
<body>
<div class="cc">
    <ul id="container">
        <li >1</li>
        <li >2</li>
        <li >3</li>
        <li>4</li>
        <li>5</li>
        <li >6</li>
        <li >7</li>
        <li >8</li>
        <li>9</li>
        <li>10</li>
    </ul>

</div>
<div class="rb">
<ul >
    <li >1</li>
    <li >2</li>
    <li >3</li>
    <li>4</li>
    <li>5</li>
    <li >6</li>
    <li >7</li>
    <li >8</li>
    <li>9</li>
    <li>10</li>
</ul>
</div>
</body>
</html>